<!--  -->
<template>
  <div class='Edit'>
    <el-dialog
      title="其它费用修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="公司名称:"
          prop="companyNameId"
        >
          <el-select
            style="width:100%;"
            filterable
            v-model="ruleForm.companyNameId"
            placeholder="请选择公司名称"
          >
            <el-option
              v-for="item in companyNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label='区域'
          prop="area"
        >
          <el-input
            style="width:100%;"
            v-model="ruleForm.area"
            placeholder="请输入区域"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="费用类型"
          prop='costType'
        >
          <el-select
            style="width:100%;"
            v-model="ruleForm.costType"
            placeholder="请选择费用类型"
          >
            <el-option
              v-for="item in costTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="缴费金额(元)"
          prop='money'
        >
          <el-input-number
            style="width:100%;"
            v-model="ruleForm.money"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="关联合同编号:">
          <el-select
            style="width:100%;"
            v-model="ruleForm.contractId"
            placeholder="请选择关联合同编号"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            style="width:100%;"
            type="textarea"
            v-model="ruleForm.remark"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogVisible = false"
          icon="el-icon-circle-close"
        >取 消</el-button>
        <el-button
          icon="el-icon-circle-check"
          type="primary"
          @click="submitForm"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { addObj, selectObj } from '@/api/cothercost'
import { getCompanyByPhone, getDicType } from '@/api/common'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    var checkAge = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else {
        if (value <= 0) {
          callback(new Error('金额不能为0'));
        } else {
          callback();
        }
      }
    }
    // 这里存放数据
    return {
      dialogVisible: false,
      ruleForm: {
        contractNumber: '',
        companyNameId: '',
        costType: '',
        isPayment: '',
        money: 0,
        area: '',
        remark: '',
        contractId: ''
      },
      options: [],
      companyNameList: [],
      item: {},
      rules: {
        companyNameId: [{
          required: true,
          message: "请输入公司名称",
          trigger: "blur"
        }],
        money: [{
          required: true,
          message: "请输入金额,只能为数字",
          trigger: "change"
        }, { validator: checkAge, trigger: 'blur' }],
        costType: [{
          required: true,
          message: "请选择费用类型",
          trigger: "blur"
        }],
        area: [{
          required: true,
          message: "请输入区域",
          trigger: "blur"
        }]
      },
      costTypeList: [],
      isRequest: true
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    init (item) {
      selectObj().then(res => {
        this.options = res.data.data
      })
      getCompanyByPhone().then(response => {
        if (response.data != null) {
          this.companyNameList = response.data.data;
        }
      })
      getDicType('other_money_type').then(res => {
        this.costTypeList = res.data.data
      })
      this.item = item
      this.ruleForm.contractId = item.contractId
      this.ruleForm.companyNameId = item.companyNameId
      this.ruleForm.remark = item.remark
      this.ruleForm.area = item.area
      this.ruleForm.costType = item.costType + ''
      this.ruleForm.money = item.money
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (!this.isRequest) {
            return
          }
          this.isRequest = false
          this.options.forEach(item => {
            if (item.value == this.ruleForm.contractId) {
              this.ruleForm.contractNumber = item.label
            }
          })
          addObj(this.ruleForm).then(data => {
            this.$message.success('修改成功')
            this.dialogVisible = false
            this.isRequest = true
            this.$emit('refreshList')
          }).catch(() => {
            loading()
          })
        } else {
          return false;
        }
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
// .demo-ruleForm {
//   display: flex;
//   flex-wrap: wrap;
// }
// /deep/.el-form-item {
//   width: 50%;
// }
</style>